<template>
  <div class="fastSet-box">
    <p class="form-title">快捷设置</p>
    <z-form :model="quickForm" inline label-width="60px">
      <z-form-item label="区域组" prop="groupName">
        <z-select v-model="quickForm.groupName" multiple placeholder="请选择区域组" class="fill-form-item">
          <z-option
            v-for="item in destinationAreaGroup"
            :key="item.destinationAreaGroup"
            :label="item.destinationAreaGroup"
            :value="item.destinationAreaGroup"
          ></z-option>
        </z-select>
      </z-form-item>
      <z-form-item v-if="[8, 9].includes(formData.subCostType)" label="重量段" prop="weightGroup">
        <z-select v-model="quickForm.weightGroup" multiple placeholder="请选择重量段" class="fill-form-item">
          <z-option
            v-for="item in weightGroup.filter(item => item.startWeight >= 0 && item.endWeight <= 999)"
            :key="item.startWeight"
            :label="`${item.startWeight}-${item.endWeight}`"
            :value="item.weightKey"
          ></z-option>
        </z-select>
      </z-form-item>
      <z-form-item label="公式" prop="formula">
        <!-- <formulaSelect v-model="quickForm" /> -->
        <div class="flex-box">
          <z-select
            v-model="quickForm.formulaType"
            :disabled="formulaTypeOpts.length === 1"
            :style="{ width: quickForm.formulaType === '3' ? '460px' : 'fit-content' }"
          >
            <z-option
              v-for="item in formulaTypeOpts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></z-option>
          </z-select>
          <div class="flex-box__item">
            <div v-if="['1'].includes(quickForm.formulaType)">
              <z-input-number
                v-model="quickForm.formula"
                :controls="false"
                :min="0"
                :max="99999999"
                placeholder="请输入"
                style="margin-right:4px;width: 100px;"
              ></z-input-number>
              元/票
            </div>
            <div v-if="['2'].includes(quickForm.formulaType)">
              <z-input-number
                v-model="quickForm.formula1"
                :controls="false"
                :min="0"
                :max="99999999"
                placeholder="请输入"
                style="margin-right:4px;width: 100px;"
              ></z-input-number>
              元/kg
            </div>
            <div v-if="['3'].includes(quickForm.formulaType)">
              <z-input-number
                v-model="quickForm.formula2"
                :controls="false"
                :min="0"
                :max="99999999"
                placeholder="请输入"
                style="margin-right:4px;width: 70px;"
              ></z-input-number>
              元/票 +（结算重量 -
              <z-input-number
                v-model="quickForm.formula3"
                :controls="false"
                :min="0"
                :max="99999999"
                placeholder="请输入"
                style="margin-right:4px;width: 70px;"
              ></z-input-number
              >kg）*
              <z-input-number
                v-model="quickForm.formula4"
                :controls="false"
                :min="0"
                :max="99999999"
                placeholder="请输入"
                style="margin-right:4px;width:70px;"
              ></z-input-number
              >元/kg
            </div>
            <!-- 包模式最大值为100 -->
            <div v-if="['4'].includes(quickForm.formulaType)">
              <z-input-number
                v-model="quickForm.formula"
                :controls="false"
                :min="0"
                :max="getMaxValue(quickForm.formulaType)"
                placeholder="请输入"
                style="margin-right:4px;width: 100px;"
              ></z-input-number
              >{{ getFormulaTypeUnit(quickForm.formulaType) }}
            </div>
          </div>
        </div>
      </z-form-item>
      <z-form-item class="form-item-box">
        <z-button type="primary" @click="handleBatchUpdate">确定</z-button>
        <z-button @click="handleReset">清空</z-button>
      </z-form-item>
    </z-form>
  </div>
</template>

<script>
import { feeModeOpts, feeTypeEnum } from '@/views/pages/feePolicyManage/opts.js'
import { formulaTypeOptions } from './config'

export default {
  name: 'QuickForm',
  props: {
    // 目的地区域组
    destinationAreaGroup: {
      type: Array,
      default: () => []
    },
    // 重量段
    weightGroup: {
      type: Array,
      default: () => []
    },
    formData: {
      type: Object,
      default: () => {} // 中转费-8 操作费-9
    }
  },
  data() {
    return {
      quickForm: {
        groupName: [],
        weightGroup: [],
        formula: undefined,
        formula1: undefined,
        formula2: undefined,
        formula3: undefined,
        formula4: undefined,
        formulaType: '1' // 公式类型
      }
    }
  },

  computed: {
    weightGroupOptions() {
      return this.weightGroup
        .filter(item => item.startWeight >= 0 && item.endWeight <= 999)
        .map(item => ({
          label: `${item.startWeight}-${item.endWeight}`,
          value: item.weightKey
        }))
    },
    formulaTypeOpts() {
      const feeModeFilter = formulaTypeOptions.filter(item => item.feeModeBelongTo.includes(this.formData.subCostType))
      const data = feeModeFilter.filter(
        item => item.quoteModeBelongTo && item.quoteModeBelongTo.includes(this.formData.quoteMode)
      )
      const opts = [feeTypeEnum.transfer].includes(this.formData.subCostType) ? feeModeFilter : data
      this.$nextTick(() => {
        const formulaType = opts && opts.length > 0 ? opts[0].value : '1'
        this.quickForm.formulaType = formulaType
      })
      return opts || []
    }
  },
  methods: {
    getMaxValue(formulaType) {
      // 根据补收标准来判断
      const value = [feeTypeEnum.operate, feeTypeEnum.packageSurcharge].includes(this.formData.subCostType)
        ? this.formData.quoteMode
        : formulaType
      return feeModeOpts.find(item => item.value === value)?.maxValue
    },
    getFormulaTypeUnit(formulaType) {
      return this.formulaTypeOpts.find(item => item.value === formulaType).unit
    },
    handleBatchUpdate() {
      this.$emit('batchUpdate', this.quickForm)
    },
    handleReset() {
      this.quickForm = {
        groupName: [],
        weightGroup: [],
        formula: undefined,
        formula1: undefined,
        formula2: undefined,
        formula3: undefined,
        formula4: undefined,
        formulaType: '1' // 公式类型
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.flex-box {
  display: flex;
  position: relative;
  .flex-box__item {
    left: 4px;
    position: absolute;
    top: 0;
    ::v-deep .z-input__inner {
      height: 24px;
      line-height: 24px;
    }
  }
}
.fastSet-box {
  background: #fafafa;
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  margin-bottom: 10px;
  padding: 0 0 0 8px;
  .form-title {
    color: #3693ff;
    font-size: 16px;
    margin: 10px 16px 0 0;
    width: 32px;
  }
  .z-form {
    margin-top: 8px;
    .form-item-box {
      margin-left: 24px;
      margin-top: 24px;
    }
  }
  ::v-deep .z-form-item__label {
    display: block;
    line-height: 24px;
    text-align: left;
  }
}
</style>
